<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>task03 三栏式布局</title>
    <link rel="stylesheet" type="text/css" href="common/normalize.css">
    <style type="text/css">
    body{
        padding:20px;
    }
    .left-part,
    .right-part,
    .mid-part {
        background-color: white;
        margin:20px;
    }
    
    .left-part,
    .right-part {
        position: absolute;
        border: 1px solid #999;
        padding: 19px;
        margin: 20px;
        top: 20px;
    }
    
    .wrapper {
        background-color: #eee;
            padding: 20px;
    }
    
    .left-part {
        width: 160px;
        left:20px;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }
    
    .left-part span {
        padding-left: 20px;
    }
    
    .right-part {
        width: 80px;
        right: 20px;
    }
    
    .mid-part {
        margin: 0 160px 0 240px;
        border: 1px solid #999;
        padding: 19px;
    }
    
    .right-part img {
        padding: 10px 0;
    }
    
    img {
        transition: all .5s;
    }
    
    img:hover {
        -webkit-transform: rotate3d(20, 20, 20, 360deg);
        transform: rotate3d(20, 20, 20, 360deg);
        transition: all .5s;
    }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="left-part">
            <img src="img/logo.png" alt="团队logo" width="80" height="80" />
            <span>TEAM CM</span>
        </div>
        <div class="mid-part">
            <span>关于我们的团队"TEAM CM"(code matters)<br>&nbsp;&nbsp;我们来自不同的省份，纵跨小半个中国；我们来自不同的大学，有二本院也有985、211的重点大学；我们各处不同的阶段，有大三狗也有研究生。但我们有着相同的目标，同样的理想。正是这份信念让我们有缘聚在一起，一起通过百度IFE学院锻炼自己的水平。<br>关于我们的团队"TEAM CM"(code matters)<br>&nbsp;&nbsp;我们来自不同的省份，纵跨小半个中国；我们来自不同的大学，有二本院也有985、211的重点大学；我们各处不同的阶段，有大三狗也有研究生。但我们有着相同的目标，同样的理想。正是这份信念让我们有缘聚在一起，一起通过百度IFE学院锻炼自己的水平。<br>关于我们的团队"TEAM CM"(code matters)<br>关于我们的团队"TEAM CM"(code matters)<br>&nbsp;&nbsp;我们来自不同的省份，纵跨小半个中国；我们来自不同的大学，有二本院也有985、211的重点大学；我们各处不同的阶段，有大三狗也有研究生。但我们有着相同的目标，同样的理想。正是这份信念让我们有缘聚在一起，一起通过百度IFE学院锻炼自己的水平。<br>关于我们的团队"TEAM CM"(code matters)<br>&nbsp;&nbsp;我们来自不同的省份，纵跨小半个中国；我们来自不同的大学，有二本院也有985、211的重点大学；我们各处不同的阶段，有大三狗也有研究生。但我们有着相同的目标，同样的理想。正是这份信念让我们有缘聚在一起，一起通过百度IFE学院锻炼自己的水平。<br>关于我们的团队"TEAM CM"(code matters)<br>关于我们的团队"TEAM CM"(code matters)<br>&nbsp;&nbsp;我们来自不同的省份，纵跨小半个中国；我们来自不同的大学，有二本院也有985、211的重点大学；我们各处不同的阶段，有大三狗也有研究生。但我们有着相同的目标，同样的理想。正是这份信念让我们有缘聚在一起，一起通过百度IFE学院锻炼自己的水平。<br>关于我们的团队"TEAM CM"(code matters)<br>&nbsp;&nbsp;我们来自不同的省份，纵跨小半个中国；我们来自不同的大学，有二本院也有985、211的重点大学；我们各处不同的阶段，有大三狗也有研究生。但我们有着相同的目标，同样的理想。正是这份信念让我们有缘聚在一起，一起通过百度IFE学院锻炼自己的水平。<br>关于我们的团队"TEAM CM"(code matters)<br>关于我们的团队"TEAM CM"(code matters)<br>&nbsp;&nbsp;我们来自不同的省份，纵跨小半个中国；我们来自不同的大学，有二本院也有985、211的重点大学；我们各处不同的阶段，有大三狗也有研究生。但我们有着相同的目标，同样的理想。正是这份信念让我们有缘聚在一起，一起通过百度IFE学院锻炼自己的水平。<br>关于我们的团队"TEAM CM"(code matters)<br>&nbsp;&nbsp;我们来自不同的省份，纵跨小半个中国；我们来自不同的大学，有二本院也有985、211的重点大学；我们各处不同的阶段，有大三狗也有研究生。但我们有着相同的目标，同样的理想。正是这份信念让我们有缘聚在一起，一起通过百度IFE学院锻炼自己的水平。<br>关于我们的团队"TEAM CM"(code matters)<br>关于我们的团队"TEAM CM"(code matters)<br>&nbsp;&nbsp;我们来自不同的省份，纵跨小半个中国；我们来自不同的大学，有二本院也有985、211的重点大学；我们各处不同的阶段，有大三狗也有研究生。但我们有着相同的目标，同样的理想。正是这份信念让我们有缘聚在一起，一起通过百度IFE学院锻炼自己的水平。<br>关于我们的团队"TEAM CM"(code matters)<br>&nbsp;&nbsp;我们来自不同的省份，纵跨小半个中国；我们来自不同的大学，有二本院也有985、211的重点大学；我们各处不同的阶段，有大三狗也有研究生。但我们有着相同的目标，同样的理想。正是这份信念让我们有缘聚在一起，一起通过百度IFE学院锻炼自己的水平。<br>关于我们的团队"TEAM CM"(code matters)<br><br></span>
        </div>
        <div class="right-part">
            <img src="img/pjy.jpg" alt="彭君怡" width="80" height="80" />
            <img src="img/pdx.jpg" alt="彭东新" width="80" height="80" />
            <img src="img/qcx.jpg" alt="秦长熙" width="80" height="80" />
        </div>
    </div>
</body>

</html>